﻿<template>
  <div class="login-wrapper">
    <form class="ant-form login-form eip-bg-white ant-form-vertical">
      <h4>{{ title }}</h4>
      <div class="alert alert-error">
        <a-alert type="error" :closable="true" v-if="error" :message="error" showIcon style="margin-bottom: 24px" />
      </div>
      <a-form @submit="onSubmit" :form="form">
        <a-form-item>
          <a-input autocomplete="autocomplete" size="large" allowClear placeholder="请输入账号" v-decorator="[
            'code',
            {
              rules: [
                {
                  required: true,
                  message: '请输入账户名',
                  whitespace: true,
                },
              ],
            },
          ]">
            <a-icon slot="prefix" type="user" />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input-password size="large" placeholder="请输入密码" autocomplete="autocomplete" type="password" v-decorator="[
            'password',
            {
              rules: [
                {
                  required: true,
                  message: '请输入密码',
                  whitespace: true,
                },
              ],
            },
          ]">
            <a-icon slot="prefix" type="lock" />
          </a-input-password>
        </a-form-item>
        <a-form-item>
          <a-input autocomplete="autocomplete" size="large" allowClear placeholder="请输入验证码" v-decorator="[
            'captcha',
            {
              rules: [
                {
                  required: true,
                  message: '请输入验证码',
                  whitespace: true,
                },
              ],
            },
          ]"><a-icon slot="prefix" type="safety-certificate" />
            <div @click="captchaInterval()" slot="addonAfter">
              <a-tooltip style="cursor: pointer">
                <template slot="title">点击重新生成验证码</template>
                <label v-if="!src">加载中...</label>
                <img v-else :src="src" alt="验证码" width="100" height="38" />
              </a-tooltip>
            </div>
          </a-input>
        </a-form-item>
        <div>
          <a-checkbox :checked="true">自动登录</a-checkbox>
          <a style="float: right">忘记密码</a>
        </div>
        <div class="enter">
          <a-form-item>
            <a-button :loading="logging" style="width: 100%; margin-top: 24px" size="large" htmlType="submit"
              type="primary">登录</a-button>
          </a-form-item>
        </div>
      </a-form>
      <div class="eip-text-center" style="font-weight: bold;font-size:20px;">
        帐号:admin 密码:123465
      </div>
      <br>
      <div class="eip-text-left" style="padding-bottom: 32px">
        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1039318332&site=qq&menu=yes">QQ:1039318332</a>
        <br>
        电话/微信:18349249218
      </div>
    </form>

    <vue-particles color="#fff" :particleOpacity="1" :particlesNumber="80" shapeType="circle" :particleSize="2"
      linesColor="#fff" :linesWidth="1" :lineLinked="true" :lineOpacity="0.8" :linesDistance="150" :moveSpeed="3"
      :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="remove" class="lizi"></vue-particles>

    <div class="login-copyright">Copyright @2022</div>
  </div>
</template>

<script>
import Vue from 'vue'
import VueParticles from 'vue-particles'
Vue.use(VueParticles)

import { login, menu, captcha } from "@/services/account/login";
import { setAuthorization } from "@/utils/request";
import { mapMutations } from "vuex";
import { loadRoutes } from "@/utils/routerUtil";
import { encryptedData } from "@/utils/util";
export default {
  name: "Login",
  data() {
    return {
      title: process.env.VUE_APP_NAME,
      src: "",
      logging: false,
      error: "",
      form: this.$form.createForm(this),
      interval: null,
    };
  },
  beforeDestroy() {
    if (this.interval) {
      clearInterval(this.interval);
    }
  },
  created() {
    let that = this;
    that.initCaptcha();
    if (that.interval) {
      clearInterval(this.interval);
    }
    that.interval = setInterval(function () {
      that.initCaptcha();
    }, 58000);
  },
  mounted() {
    this.getCity();
  },
  computed: {
    systemName() {
      return this.$store.state.setting.systemName;
    },
  },
  methods: {
    ...mapMutations("account", ["setUser", "setPermissions", "setRoles"]),
    //获取登录地址
    getCity() { },

    /**
     * 初始化验证码
     */
    initCaptcha() {
      let that = this;
      captcha().then((result) => {
        const myBlob = new window.Blob([result], { type: "image/gif" });
        const qrUrl = window.URL.createObjectURL(myBlob);
        that.src = qrUrl;
      });
    },

    /**
     * 提交
     * @param {} e
     */
    onSubmit(e) {
      var that = this;
      e.preventDefault();
      this.form.validateFields((err) => {
        if (!err) {
          that.logging = true;
          that.error = "";
          const captcha = encryptedData(that.form.getFieldValue("captcha"));
          const code = encryptedData(that.form.getFieldValue("code"));
          const password = encryptedData(that.form.getFieldValue("password"));
          const returnCitySN = JSON.parse(
            sessionStorage.getItem("returnCitySN")
          );
          const remoteIp = returnCitySN.cip;
          const remoteIpAddress = returnCitySN.cname;
          const navigator = returnCitySN.navigator;
          login({
            code,
            password,
            remoteIp,
            remoteIpAddress,
            navigator,
            captcha,
          })
            .then(that.afterLogin)
            .catch((error) => {
              that.$message.error("访问异常", 3);
              that.logging = false;
            });
        }
      });
    },

    /**
     * 登录成功
     * @param {} result
     */
    afterLogin(result) {
      const loginRes = result;
      let that = this;
      if (loginRes.code === this.eipResultCode.success) {
        //获取菜单
        var routesConfig = [
          {
            router: "root",
            children: [],
          },
        ];
        this.setUser(loginRes.data);
        setAuthorization({
          token: loginRes.data.token,
          expireAt: new Date(loginRes.data.expireAt),
        });

        //注册路由
        menu().then((result) => {
          result.forEach((element) => {
            routesConfig[0].children.push(element);
          });
          loadRoutes(routesConfig);
          that.routerGo(routesConfig);
          that.$message.success(loginRes.msg, 3);
        });
      } else {
        this.error = loginRes.msg;
        this.captchaInterval();
      }
      this.logging = false;
    },

    /**
     *
     *
     */
    routerGo(routesConfig) {
      var routes = [];
      // 递归遍历控件树
      const traverse = (array) => {
        array.forEach((element) => {
          if (element.path) {
            routes.push(element);
          } else {
            // 栅格布局 and 标签页
            element.children.forEach((item) => {
              if (item.path) {
                routes.push(item);
              } else {
                traverse(item.children);
              }
            });
          }
        });
      };
      traverse(routesConfig);
      this.$router.push(routes[0].path);
    },

    /**
     * 定时器
     */
    captchaInterval() {
      let that = this;
      that.initCaptcha();
      if (that.interval) {
        clearInterval(this.interval);
      }
      that.interval = setInterval(function () {
        that.initCaptcha();
      }, 58000);
    },
  },
};
</script>

<style lang="less" scoped>
.lizi {
  width: calc(100% - 100px);
  height: calc(100% - 100px);
  position: absolute;
}

.login-wrapper:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
}

.login-wrapper {
  padding: 48px 16px 0 16px;
  position: relative;
  box-sizing: border-box;
  background-image: url(images/bg-login.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
}

.login-form {
  width: 360px;
  margin: 0 auto;
  max-width: 100%;
  padding: 0 28px;
  box-sizing: border-box;
  box-shadow: 0 3px 6px rgb(0 0 0 / 15%);
  border-radius: 2px;
  position: relative;
  z-index: 2;
}

@media screen and (min-height: 640px) {
  .login-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -230px;
  }
}

.eip-bg-white {
  background-color: #fff !important;
}

.login-form h4 {
  padding: 22px 0;
  text-align: center;
}

.login-copyright {
  color: #eee;
  text-align: center;
  padding: 48px 0 22px 0;
  position: relative;
  z-index: 1;
}

@media screen and (min-height: 640px) {
  .login-copyright {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

h4 {
  font-size: 20px;
}

.eip-pull-right {
  float: right;
}

.eip-text-center {
  text-align: center;
}

/deep/ .ant-input-group-addon {
  padding: 0 !important;
}
</style>
